<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内边距</title>
</head>
<body>
<!--元素内边距
指的是元素里的内容与边框之间的距离
属性：
padding-left: 左内边距
padding-right: 右内边距
padding-top: 上内边距
padding-bottom: 下内边距
padding: 上 右 下 左-->
<style>
    .red{
        border:5px solid red;
        background-color:green;
    }
    .pad-left{
        border:5px solid red;
        background-color:green;
        padding-left:50px;
    }
</style>

<span class="red"> 无内边距的span  </span><br/> <br/>
<span class="pad-left"> 左边距为50的span  </span><br/>

<!--属性：padding
值：如果只写一个，即四个方向的值
值：如果写四个，即四个方向的值
上 右 下 左,依顺时针的方向依次赋值-->
<style>
    .pad-left-one{
        border:5px solid red;
        background-color:green;
        padding: 20px;
    }

    .pad-left-four{
        border:5px solid red;
        background-color:green;
        padding: 10px 20px 30px 40px;
    }

</style>
<br/>
<span class="pad-left-one"> padding:20的span  </span> <br/> <br/> <br/> <br/>

<span class="pad-left-four">
padding: 10 20 30 40 的span </span> <br/> <br/> <br/> <br/>

<!--当内边距的值少于4个的时候-->
<!--如果缺少左内边距的值，则使用右内边距的值。
如果缺少下内边距的值，则使用上内边距的值。
如果缺少右内边距的值，则使用上内边距的值。
举例说明
这是完整4个的
padding: 10 20 40 80
如果只有3个
padding: 10 20 40
那么left取right
padding: 10 20 40 = padding: 10 20 40 20
如果只有两个
padding: 10 20
那么bottom取top，left取right
padding: 10 20 = padding:10 20 10 20
如果只有一个
padding:10
那么right取top，bottom取top，left取top
padding:10 = padding:10 10 10 10-->
</body>
</html>